import React, {useEffect} from 'react';
import {Checkbox, Form, Input} from "antd";
import {QuestionParagraphType} from "./interface";

const {TextArea} = Input
const PropComponent: React.FC<QuestionParagraphType> = (props: QuestionParagraphType) => {
  const {text = '', isCenter = false, onChange, disabled} = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({text, isCenter})
  }, [text, isCenter]);

  function handleChange() {
    console.log('form.getFieldsValue()', form.getFieldsValue())
    if (!onChange) return
    onChange(form.getFieldsValue())
  }

  return (
    <Form layout={'vertical'} initialValues={{text, isCenter}}
          disabled={disabled}
          form={form} onValuesChange={handleChange}>
      <Form.Item label={'段落内容'} name={'text'} rules={[{required: true, message: '请输入段落内容'}]}>
        <TextArea/>
      </Form.Item>
      <Form.Item label={'居中'} name={'isCenter'} valuePropName={'checked'}>
        <Checkbox>居中显示</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
